<template>
  <div class="orderStatusSection-container">
    <div class="left-view">
      <!-- 待付款 -->
      <template v-if="checkStatus(orderDetails.orderStatus, '待付款')">
        <h2>待付款</h2>
        <div>
          <el-button type="primary" @click="closeOrder">关闭订单</el-button>
          <el-button type="error" @click="changeModifyPrice">
            修改价格
          </el-button>
        </div>
      </template>

      <!-- 待发货 -->
      <template v-else-if="checkStatus(orderDetails.orderStatus, '待发货')">
        <h2>待发货</h2>
        <div>
          <el-button type="primary" @click="deliverGoodsActon">发货</el-button>
          <el-button type="error" @click="refund">退款</el-button>
        </div>
      </template>

      <!-- 待收货 -->
      <template
        v-else-if="checkStatus(orderDetails.orderStatus, ['待收货', '已完成'])"
      >
        <h2 v-if="checkStatus(orderDetails.orderStatus, '待收货')">
          待收货，等待交易成功
        </h2>
        <h5 v-if="checkStatus(orderDetails.orderStatus, '待收货')">
          {{ countDownString }}后自动确认收货
        </h5>

        <h2 v-if="checkStatus(orderDetails.orderStatus, '已完成')">已完成</h2>
        <div>
          <el-button type="error" @click="refund">退款</el-button>
        </div>
      </template>
      <template v-else>
        <h2>{{ orderStatusDic[orderDetails.orderStatus] }}</h2>
      </template>
      <div class="msg">
        买家留言：
        <span></span>
      </div>
      <div class="msg">
        卖家备注：
        <el-button v-if="true">添加备注</el-button>
        <span v-else></span>
      </div>
    </div>
    <div class="right-view">
      <el-steps :active="active" finish-status="success">
        <el-step
          v-for="(title, key) in orderStatusArr"
          :title="title"
          :key="key"
        />
      </el-steps>
    </div>
    <deliverGoodsDialog
      v-model:dialogVisible="deliverGoods"
      :orderData="orderDetails"
      :id="id"
      @addSuccess="reload"
    ></deliverGoodsDialog>
    <modifyPriceDialog
      v-model:modifyPriceDialog="modifyPriceVisible"
      :id="orderDetails.id"
      :orderData="orderDetails"
      @addSuccess="reload"
    ></modifyPriceDialog>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import type { PropType } from 'vue'
  import type { orderStatus } from '@/types/shop'
  import { closureOrder, refundWithOrder } from '@/api/modules/shop'
  import { usePromise } from '@/hooks/core/usePromise'
  import deliverGoodsDialog from '../deliverGoodsDialog/index.vue'
  import modifyPriceDialog from '../modifyPriceDialog/index.vue'
  import common from '@/utils/common'
  import { useOrder } from '../../hooks/useOrder'
  import { useDateHubs } from '@/hooks/web/useDateHub'
  const props = defineProps({
    orderDetails: {
      type: Object as PropType<orderStatus>,
      default() {
        return {}
      },
    },
    id: {
      type: Number,
      default() {
        return null
      },
    },
  })
  const emits = defineEmits(['reload'])

  const { generateCountDownString } = useDateHubs()
  const countDownString = computed(() => {
    if (props.orderDetails && props.orderDetails.expiryDate) {
      // return generateCountDownBase(props.orderDetails.expiryDate * 24 * 3600)
      return generateCountDownString('', props.orderDetails.expiryDate).value
    }
    return ''
  })
  // const statusDic = { 0: 0, 1: 1, 10: 1, 20: 2 }

  const { statusSteps, statusStepActive, checkStatus, orderStatusDic } =
    useOrder()
  // 不同的状态有不同的进度条
  const orderStatusArr = computed(() => {
    const { orderStatus } = props.orderDetails
    // TODO 退款中70 但是显示退款成功
    return statusSteps(orderStatus)
  })
  // 不同状态亮的不一样
  const active = computed(() => {
    const { orderStatus } = props.orderDetails
    return statusStepActive(orderStatus)
  })

  const { to } = usePromise()
  // 关闭订单
  async function closeOrder() {
    const b = await common.syncAlert('是否确定退款')
    // closureOrder
    const [err, res] = await to(closureOrder({ id: props.id }))
    if (!err) {
      emits('reload')
    }
  }
  // 退款
  async function refund() {
    const b = await common.syncAlert('是否确定退款。')
    const [err, res] = await to(refundWithOrder({ id: props.id }))
    if (!err) {
      emits('reload')
    }
  }
  // 修改价格
  const modifyPriceVisible = ref(false)
  function changeModifyPrice() {
    modifyPriceVisible.value = true
  }
  // 发货
  const deliverGoods = ref(false)
  function deliverGoodsActon() {
    deliverGoods.value = true
  }
  // 修改物流

  // 刷新页面
  function reload() {
    emits('reload')
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .orderStatusSection-container {
    @include card-shadow;
    background: white;
    padding: 22px 40px;
    display: flex;
    margin-bottom: 20px;
    //height: 200px;
    .left-view {
      width: 30%;
      .msg {
        margin-top: 10px;
        font-size: 15px;
      }
    }
    .right-view {
      width: 70%;
      padding: 10px 10%;
    }
  }
</style>
